<!--
制品
-->
<template>
    <el-tabs class="mc-product" v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="我的" name="my" :lazy="true">
        <el-container style="height:100%">
          <el-header height="36px" class="mc-product-header">
            <el-pagination small layout="prev,pager,next" @current-change="myPageChange" :total="my.totalCount" :page-size="my.pageSize" :current-page.sync="my.currentPage" :pager-count="5"></el-pagination>
          </el-header>
          <el-main>
            <el-card v-for="(item,idx) in my.list">
              <el-image v-if="item.image" style="width: 100%; max-height: 300px" :src="yml.serverIp+item.image"></el-image>
              <el-row>
                <el-col :span="24">{{item.title}}</el-col>
                <el-col :span="24"><el-rate size="mini" v-model="item.star"></el-rate></el-col>
                <el-col :span="24"><el-button type="danger" size="mini" @click="deleteItem(item)">删除</el-button><el-button style="float: right" type="primary" size="mini" @click="choose(item)">使用</el-button></el-col>
              </el-row>
            </el-card>
          </el-main>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="市场" name="market"  :lazy="true">
        <el-dialog @close="activeName='my'" :append-to-body="true" top="5px" width="90%" :visible.sync="marketDialog" title="搜索制品">
          <el-container style="height:800px">
            <el-header height="100px;overflow:auto" class="mc-product-header">
              <el-form size="small" :inline="true" v-model="marketQuery">
                <el-form-item>
                  <el-radio-group @change="changeCategory" v-model="marketQuery.category">
                    <el-radio-button label="">全部</el-radio-button>
                    <el-radio-button label="echarts">统计</el-radio-button>
                    <el-radio-button label="table" v-if="false">表格</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-radio-group @change="market.currentPage=1;marketPageChange()" v-model="marketQuery.categoryChild">
                    <el-radio-button :label="item.label" v-for="(item,idx) in categoryChildren">{{item.name}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="marketQuery.title" placeholder="请输入关键字"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="marketPageChange" type="primary">搜索</el-button>
                </el-form-item>
              </el-form>
            </el-header>
            <el-main style="overflow: hidden">
              <el-row class="mc-product-i" >
                <el-col style="height: 33vh;padding:2px;box-sizing: border-box" :span="4" v-for="(item,idx) in market.list">
                  <el-card>
                    <el-row>
                      <el-col :span="24">
                        <el-image v-if="item.image" style="width: 100%; max-height: 300px" :src="yml.serverIp+item.image"></el-image>
                      </el-col>
                      <el-col :span="18">{{item.title}}</el-col>
                      <el-col style="margin-top: 2px;" :span="6" v-if="item.star>0">
                        <i class="el-icon-s-flag" ></i>{{item.star}}
                      </el-col>
                      <el-col :span="24">
                        <i class="el-icon-star-off" title="收藏" @click="collect(item)" style="color:#E6A23C"></i>
                        <i class="el-icon-warning-outline" title="上报异常" @click="warning(item)" style="color:pink"></i>
                        <el-button style="float: right" type="primary" size="mini" @click="choose(item)">使用</el-button>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
            <el-footer>
              <el-pagination layout="total, prev, pager, next, jumper" @current-change="marketPageChange" :total="market.totalCount" :page-size="market.pageSize" :current-page.sync="market.currentPage" :pager-count="9" background></el-pagination>
            </el-footer>
          </el-container>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
</template>

<script>
import request from "../utils/request";
export default {
  name: 'mc-product',
  data () {
    return {
      category:{
        "echarts":[
          {label:"",name:"全部",},
          {label:"line",name:"折线",},
          {label:"pie",name:"饼图",},
          {label:"bar",name:"柱形",},
          {label:"map",name:"地图",},
          {label:"graph",name:"关系",},
          {label:"custom",name:"自定义",},
          {label:"scatter",name:"散点",},
          {label:"gauge",name:"仪表盘",},
          {label:"tree",name:"树形",},
          {label:"3D",name:"3D图",},
          {label:"liquidFill",name:"水球",},
          {label:"Candlestick",name:"K线",},
          {label:"radar",name:"雷达",},
          {label:"funnel",name:"漏斗",},
          {label:"sunburst",name:"旭日",},
          {label:"sankey",name:"桑基",},
          {label:"wordcloud",name:"词云",},
          {label:"boxplot",name:"箱型",},
          {label:"themeRiver",name:"主题河流",},
          {label:"pictorialBar",name:"象形"},
        ],
        "table":[

        ]
      },
      categoryChildren:[],
      marketQuery:{
        title:"",category:"echarts",categoryChild:""
      },
      market:{
        list:[],
        totalCount:100,
        pageSize:12,
        currentPage:0
      },
      my:{
        list:[],
        totalCount:100,
        pageSize:10,
        currentPage:0
      },
      marketDialog:false,
      activeName:'my',
      yml:{
        serverIp:""
      }
    }
  },
  props:[],
  mounted () {
    if(!this.yml.serverIp){
      request.axios({$vue:this,url:("magical_lowcode/web/global/config"),method:"get",param:{}})
        .then(res=>{
            this.yml.serverIp = res.data.server.ip;
            this.myPageChange();
            this.changeCategory();
        })
    }
  },
  methods:{
    changeCategory:function () {
      this.marketQuery.categoryChild="";
      this.categoryChildren=[];
      this.$nextTick(()=> {
        this.categoryChildren=this.category[this.marketQuery.category]
      })
    },
    tabClick:function (tab) {
      if(this.activeName=='my'){
        this.myPageChange();
      }else {
        this.marketDialog=true;
        this.marketPageChange();
      }
    },
    myPageChange:function () {
      var _t = this;
      request.axios({$vue:this,url:("magical_lowcode/server/proxy-get?url=/u/user-product/my-page/"+this.my.currentPage+"/"+this.my.pageSize),method:"post",params:{}}).then(function (res){
        if(res.data!=null){
          _t.my.list = res.data;
          _t.my.totalCount = res.count;
        }
      })
    },
    marketPageChange() {
      var _t = this;
      request.axios({$vue:this,url:("magical_lowcode/server/proxy-get?url=/u/user-product/page/"+this.market.currentPage+"/"+this.market.pageSize),method:"post",params:this.marketQuery}).then(function (res){
        if(res.data!=null){
          _t.market.list = res.data;
          _t.market.totalCount = res.count;
        }
      })
    },
    choose:function (item) {
      var _t = this;
      request.axios({$vue:this,url:"magical_lowcode/server/proxy-get?url=/u/user-product/info",method:"post",params:{uuid:item.uuid}}).then(function (res){
        if(res.flag){
          _t.$emit("choose",res.data)
          _t.marketDialog=false;
        }
      })
    },
    collect:function (item) {
      var _t = this;
      request.axios({$vue:this,url:"magical_lowcode/server/proxy-get?url=/u/user-product/collect",method:"post",params:{uuid:item.uuid}}).then(function (res){
        if(res.flag){
          _t.my.list.push(res.data);
          _t.$message({type:"success",message:"收藏成功"})
        }
      })
    },
    warning:function (item) {
      var _t = this;
      request.axios({$vue:this,url:"magical_lowcode/server/proxy-get?url=/u/user-product/warning",method:"post",params:{uuid:item.uuid}}).then(function (res){
        _t.$message({type:"success",message:"感谢您的反馈，上报成功"})
      })
    },
    deleteItem:function (item) {
      var _t = this;
      request.axios({$vue:this,url:"magical_lowcode/server/proxy-get?url=/u/user-product/delete",method:"post",params:{uuid:item.uuid}}).then(function (res){
        if(res.flag){
          for(var i=0;i<_t.my.list.length;i++){
            if(item.uuid==_t.my.list[i].uuid){
              _t.my.list.splice(i,1);
              break;
            }
          }
          if(_t.my.list.length==0){
            _t.myPageChange();
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .mc-product-i i{
    font-size: 20px;
    cursor: pointer;
  }
.mc-product{
  height: 100%;

  .el-main{
    .el-card{
      margin-top:6px;
    }
  }
  .mc-product-header{
    text-align: center;
  }
  .el-tabs__content{
    height: 100%;
    .el-tab-pane{
      height: calc( 100% - 70px );
    }
  }
  .el-tabs__header{
    .el-tabs__item.is-active{
      color: #409EFF;
    }

    .el-tabs__active-bar{
      width: 28px !important;/*莫名奇妙没渲染*/
    }
  }

}
</style>
